<template>
  <div class="box">
    <div class="box1" v-for="(v, i) in obj" :key="i">
      <img :src="v.img" alt="" />
      <p>{{ v.text | danhang }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: [
        { text: "车主专区", img: "./img/life/lysx (1).png" },
        { text: "私行专区", img: "./img/life/lysx (2).png" },
        { text: "善融优惠", img: "./img/life/lysx (3).png" },
        { text: "陕西惠", img: "./img/life/lysx (4).png" },
        { text: "龙好礼", img: "./img/life/lysx (5).png" },
        { text: "陕西省旅游年票", img: "./img/life/lysx (6).png" },
        { text: "京车会", img: "./img/life/lysx (7).png" },
        { text: "马腾空车检 ", img: "./img/life/lysx (8).png" },
        { text: "怡康到家", img: "./img/life/lysx (9).png" },
        { text: "生活缴费", img: "./img/life/lysx (10).png" },
      ],
    };
  },
  filters: {
    danhang(val) {
      if (val.length > 4) {
        return val.substr(0, 4) + "...";
      } else {
        return val;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  text-align: center;
  > .box1 {
    padding: 0.15rem 0;
    width: 0.65rem;
    > img {
      width: 0.48rem;
    }
    > p {
      font-size: 0.13rem;
    }
  }
}
</style>